出处：掘金

原作者：ErpanOmer

Interaction to Next Paint (INP) 是 Google Core Web Vitals 的一部分，用来评估网页交互性能的新指标。与传统的指标（如 FID）不同，INP 不仅关注用户首次交互的响应速度，还对整个页面的交互响应性进行更全面的衡量。这一指标的提出，旨在解决用户在浏览和使用页面时体验到的交互延迟问题，从而提高整体用户体验

本文将通过理论、实践代码和优化技巧，全面解读 INP

什么是 INP？

INP 是一个反映页面在用户交互后响应时间的指标。它衡量用户点击、滚动、按键等交互事件与下一次屏幕更新（页面内容渲染）之间的延迟时间

定义：

1. 交互事件的开始时间：如用户点击按钮的时间
2. 下一帧内容绘制完成时间：页面更新以反映用户操作的结果的时间

INP 的数值是页面中所有交互事件响应延迟的 95th 百分位数，即排除掉最慢 5% 的事件

为什么 INP 很重要？

1. 更真实的交互体验反映：相比 FID（仅关注用户首次交互），INP 覆盖了页面的所有交互
2. 优化用户体验的关键：交互响应延迟过长会导致用户感到卡顿，从而影响留存率和转化率
3. Google 核心指标：INP 已成为搜索引擎优化（SEO）的重要参考

INP 是如何计算的？

公式：

INP = Max(Interaction Delay + Next Paint Delay)

关键组成部分：

1. Interaction Delay：用户事件触发后，浏览器处理该事件的时间
2. Next Paint Delay：处理完成后，浏览器绘制新内容所需的时间

测量 INP 的方法

Lighthouse

使用 Chrome DevTools 的 Lighthouse 生成性能报告，其中会包含 INP 的数值

Web Vitals JavaScript 库

借助 Google 提供的 Web Vitals 库，开发者可以在代码中动态测量 INP：

import { onINP } from 'web-vitals';

onINP((metric) => {
    console.log('INP value:', metric.value);
});

手动分析性能

通过 Performance 面板观察用户交互事件的响应时间。步骤：

1. 打开 Chrome DevTools，切换到 Performance 标签
2. 开始录制后，模拟用户操作（如点击按钮）
3. 找到 Interaction 和 Next Paint 的延迟，手动计算

常见 INP 问题

JavaScript 任务阻塞

问题：长时间运行的 JavaScript 脚本会阻塞主线程，导致 INP 延迟增加

优化：使用 setTimeout 或 Web Worker 将任务拆分

动画和过渡阻塞

问题：复杂的 CSS 动画或 JavaScript 动画占用大量资源

优化：使用 GPU 加速的 transform 和 opacity

DOM 操作频繁

问题：大量同步 DOM 操作导致主线程被占用

优化：使用 DocumentFragment 批量更新 DOM

如何优化 INP？

1. 减少主线程阻塞
   • 优化 JavaScript 执行，避免长任务
   • 使用异步加载技术（如动态导入）
2. 提高渲染性能
   • 优化 CSS 和动画，避免复杂布局
   • 使用 GPU 加速的 CSS 属性，如 transform 和 opacity
3. 减少第三方资源影响
   • 删除未使用的第三方脚本
   • 将关键资源优先加载
4. 事件处理优化
   • 避免在事件监听器中添加耗时任务
   • 使用 passive 属性优化滚动事件：document.addEventListener('scroll', handleScroll, { passive: true });
5. 使用 Web Workers
   • 将复杂计算任务转移到 Web Workers，避免阻塞主线程：

const worker = new Worker('worker.js');
worker.postMessage('start');

worker.onmessage = (event) => {
    console.log('Worker Result:', event.data);
};

工具和实践

1. Lighthouse：分析页面性能，重点检查交互延迟
2. WebPageTest：提供详细的 INP 指标和交互分析
3. Performance 面板：手动调试并查找阻塞任务

总结

Interaction to Next Paint (INP) 是衡量网页交互响应性能的重要指标，关注整个页面的交互延迟，而不仅是首次交互。优化 INP 需要开发者从多个角度入手，包括减少主线程阻塞、优化动画和 DOM 操作，以及合理利用异步技术。通过持续监控和优化 INP，可以显著提升用户体验，为页面的整体性能加分